<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <p>
        全选: <input type="checkbox" name="" id="" class="check-all">
    </p>
    <p>
        单选: <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
    </p>
</body>
<script>
    // 全选
    $(".check-all").click(function () {
        // var status = this.checked;
        var status = $(this).prop("checked");
        console.log(status);
        $(".check-one").prop("checked", status);
    })

    // 反选 
    $(".check-one").click(function () {
        // var flag = true;
        // $(".check-one").each(function () {
        //     if ($(this).prop("checked") == false) {
        //         flag = false;
        //     }
        // })
        // $(".check-all").prop("checked", flag);

        // var flag = $(".check-one").length == $(".check-one:checked").length ? true : false;
        // $(".check-all").prop("checked", flag);

        var flag = $(".check-one").is(":not(:checked)")  // 是否存在未被选中的 (true:存在 false:不存在)
        $(".check-all").prop("checked", !flag);
    })

</script>

</html>